import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Input, Button, Modal, message } from 'antd';
import moment from 'moment';
import router from 'umi/router';
import Mpagination from './components/Mpagination';
import styles from '../../index.less';
import * as apis from '@/services/ValueApprovelMgr';

const { Search } = Input;
const { confirm } = Modal;
export default class ProjectValue extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      total: 0,
      pageSize: 20,
      current: 1,
      pages: 0,
      serachValue: '',
      columns: [
        {
          title: '序号',
          dataIndex: 'key',
          width: 50,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '审批单名称',
          dataIndex: 'subject',
          width: 400,
          ellipsis: true,
        },
        {
          title: '发起人',
          dataIndex: 'usercn',
          ellipsis: true,
        },
        {
          title: '审批状态',
          dataIndex: 'state',
          ellipsis: true,
        },
        {
          title: '创建时间',
          dataIndex: 'createdTime',
          render: (text, record) => <>{moment(record.createdTime).format('YYYY-MM-DD HH:mm:ss')}</>,
          ellipsis: true,
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          render: (text, record) => <>{moment(record.updateTime).format('YYYY-MM-DD HH:mm:ss')}</>,
          ellipsis: true,
        },
        {
          title: '操作',
          align: 'center',
          width: 200,
          render: (text, record, index) => this.handleRendeRoperation(text, record, index),
        },
      ],
    };
  }

  componentDidMount() {
    this.getGoodsApprovedRecordViewUsing(1, 20);
  }

  getGoodsApprovedRecordViewUsing(current, pageSize, searchStr) {
    this.setState({
      loading: true,
    });
    const { match } = this.props;
    const params = {
      projectId: match.params.project,
      current,
      pageSize,
      searchStr,
      businessType: 'return_coefficient',
    };
    apis.goodsApprovedRecordViewUsingGET({ params }).then(data => {
      if (data && data.code === 1) {
        const { total, pages, list } = data.data;
        if (list && list.length > 0) {
          list.forEach((item, index) => {
            list[index].key = data.data.pageSize * (data.data.current - 1) + index + 1;
            list[index].subject = item.subject ? item.subject : '';
          });
        }
        this.setState({
          total,
          pageSize,
          current,
          pages,
          loading: false,
          dataSource: list,
        });
      }
    });
  }

  // 操作 功能按钮
  handleRendeRoperation = (text, record) => (
    <div className="roperation">
      <Button
        type="link"
        onClick={() => {
          if (record.resUrl) {
            window.open(record.resUrl);
          } else {
            message.warning('当前账号没有查看审批权限');
          }
        }}
      >
        查看审批
      </Button>
      {record.state === '审批中' || record.state === '驳回发起' || record.state === '撤回发起' ? (
        <Button type="link" onClick={() => this.handleInvalid(record)}>
          作废流程
        </Button>
      ) : null}
      {record.state === '流程草稿' ? (
        <Button type="link" onClick={() => this.handleDelete(record)}>
          删除流程
        </Button>
      ) : null}
    </div>
  );

  // 分页切换
  handlePaginationChange = (current, pageSize) => {
    this.setState({ current, pageSize });
    this.getGoodsApprovedRecordViewUsing(current, pageSize, this.state.serachValue);
  };

  // 修改每页参数
  onShowSizeChange = (current, pageSize) => {
    this.handlePaginationChange(current, pageSize);
  };

  handleSearchIpt = value => {
    this.setState({ serachValue: value });
    this.getGoodsApprovedRecordViewUsing(this.state.current, this.state.pageSize, value);
  };

  handleDelete(row) {
    const sefl = this;
    const { current, pageSize } = sefl.state;
    const params = {
      instanceId: row.instanceId,
    };
    confirm({
      title: '是否要删除该流程?',
      content: '确定后将删除该流程',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        apis.deleteFlowUsingDELETE({ params }).then(result => {
          if (result && result.code === 1) {
            message.success('删除成功！');
            sefl.getGoodsApprovedRecordViewUsing(current, pageSize);
          }
        });
      },
    });
  }

  handleInvalid(row) {
    const sefl = this;
    const { current, pageSize } = sefl.state;
    const params = {
      instanceId: row.instanceId,
    };
    confirm({
      title: '是否要废弃该流程?',
      content: '确定后将作废该流程',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        apis.endFlowUsingPUT({ params }).then(result => {
          if (result && result.code === 1) {
            message.success('废弃成功！');
            sefl.getGoodsApprovedRecordViewUsing(current, pageSize);
          }
        });
      },
    });
  }

  render() {
    const { columns, dataSource, total, pageSize, current, pages, loading } = this.state;
    return (
      <div className={styles['Contract-approval']}>
        <PageHeaderWrapper
          breadcrumb={null}
          title="审批记录"
          tags={null}
          extra={
            <>
              <Button style={{ margin: '0 5px' }} onClick={() => router.goBack(-1)}>
                返回
              </Button>
              <Search
                placeholder="请输入审批单名称搜索"
                onSearch={this.handleSearchIpt}
                style={{ width: 200 }}
              />
            </>
          }
        >
          <Card>
            <div className="content">
              <Table
                loading={loading}
                dataSource={dataSource}
                rowKey="businessKey"
                columns={columns}
                bordered
                pagination={false}
                scroll={{ y: 'calc(100vh - 200px)' }}
              />
              <Mpagination
                total={total}
                pageSize={pageSize}
                current={current}
                pages={pages}
                handlePaginationChange={this.handlePaginationChange}
                onShowSizeChange={(c, p) => this.onShowSizeChange(c, p)}
              />
            </div>
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}
